<template>
    <div>
        <div class="container">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="操作用户" prop="status">
                    <el-select
                            v-model="queryParams.userId"
                            placeholder="请选择操作用户"
                            clearable
                            filterable
                            size="small"
                            style="width: 240px"
                    >
                        <el-option
                                v-for="dict in userList"
                                :key="dict.value"
                                :label="dict.nickName"
                                :value="dict.userId"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="操作类型" prop="operationType">
                    <el-select
                            v-model="queryParams.operationType"
                            placeholder="请选择操作类型"
                            clearable
                            size="small"
                            style="width: 240px"
                    >
                        <el-option label="持续跟进预警" :value="1"></el-option>
                        <el-option label="预警已处理" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间段">
                    <el-date-picker
                            v-model="dateRange"
                            size="small"
                            style="width: 340px"
                            type="datetimerange"
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="['00:00:00', '23:59:59']"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" v-has-permi="['system:opeRecord:list']" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
            >
                <el-table-column class="fixed" fixed label="操作用户" align="center" prop="createBy"  />
                <el-table-column label="IP" align="center" prop="operationIp" :show-overflow-tooltip="true" width="190" />
                <el-table-column label="操作类型" align="center" prop="operationType"  width="200" />
                <el-table-column label="操作描述" align="center" prop="operationDesc" :show-overflow-tooltip="true" />
                <el-table-column label="属地管理员" align="center" prop="deptName" width="210" />

                <el-table-column label="操作时间" align="center" prop="createTime" width="260">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="queryParams.pageIndex"
                        :page-size="queryParams.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import request from '@/api/system/operation';
    export default {
        name: 'basetable',
        data() {
            return {
                ids: [],
                // 查询参数
                pageTotal: 0,
                queryParams: {
                    pageIndex: 1,
                    pageSize: 10,
                    roleName: undefined,
                    roleKey: undefined,
                    operationType: undefined,
                    userId: undefined
                },
                // 日期范围
                dateRange: [],
                tableData: [],
                userList: [],
            };
        },
        created() {
            this.getUserList();
            this.getList();
        },
        methods: {
            getList() {
                request.operationList(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
                    this.tableData = res.data.list;
                    this.pageTotal = parseInt(res.data.total);
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageIndex = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },


            // 分页导航
            handlePageChange(val) {
                this.$set(this.queryParams, 'pageIndex', val);
                this.getList();
            },
            //用户列表
            getUserList(){
                let params = {
                    deptId: undefined,
                    phoneNumber: "",
                    searchEndTime: "",
                    searchStartTime: "",
                    status: "",
                    userId: undefined,
                    userName: ""
                };
                request.userList(params).then(res=>{
                    if(res.code===0){
                        this.userList = res.data.list;
                        console.log('用户列表：',res)
                    }

                })
            }
        }
    };
</script>

<style  scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    ::v-deep  .el-table thead {
        color: black;
    }

</style>
